<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input v-model="params.poleName" clearable placeholder="请输入一体杆名称" class="search-main" />
      <span class="search-label">一体杆编号：</span>
      <el-input v-model="params.poleNumber" clearable placeholder="请输入一体杆编号" class="search-main" />
      <span class="search-label">处置状态：</span>
      <el-select v-model="params.poleStatus" placeholder="请选择处置状态">
        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="searchFn">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div v-auth-dir="`pole:warning:list`" class="table">
      <el-table style="width: 100%" :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="故障类型" prop="errorType" />
        <el-table-column label="处置状态" prop="handleStatus" :formatter="formatterStatusFn" />
        <el-table-column label="告警时间" prop="warningTime" />
        <el-table-column label="操作" fixed="right" width="180">
          <!-- scope的值：{row：一行数据对象} -->
          <template #default="scope">
            <el-button v-auth-dir="`pole:warning:send`" size="mini" type="text" :disabled="scope.row.handleStatus===1">派单</el-button>
            <el-button v-auth-dir="`pole:warning:query`" size="mini" type="text" @click="$router.push(`/warningDetail?id=${scope.row.id}`)">详情</el-button>
            <el-button v-auth-dir="`pole:warning:remove`" size="mini" type="text" :disabled="scope.row.handleStatus ===1" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        @current-change="currentChangeFn"
      />
    </div>
  </div>
</template>
<script>
import { getWarningListAPI } from '@/apis/rod'

export default {
  data() {
    return {
      params: {
        'pageSize': 10, // 一页条数
        'page': 1, // 页码
        'poleName': '', // 一体杆名称
        'poleNumber': '', // 一体杆编号
        'poleStatus': null// 一体杆状态
      },
      statusList: [
        { label: '全部',
          value: null
        }, {
          label: '未派单',
          value: 0
        }, {
          label: '已派单',
          value: 1
        },
        {
          label: '已接单',
          value: 2
        },
        {
          label: '已完成',
          value: 3
        }
      ],
      tableData: [], // 表格数据
      total: 0 // 总数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getWarningListAPI(this.params)
      console.log(res)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    formatterStatusFn(row) {
      const obj = {
        0: '未派单',
        1: '已派单',
        2: '已接单',
        3: '已完成'
      }
      return obj[row.handleStatus]
    },
    // 搜索事件
    searchFn() {
      this.getList()
      this.params.page = 1
    }, // 改变页码
    currentChangeFn(page) {
      this.params.page = page
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
  button{
    margin-right: 20px;
  }
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}
::v-deep .form-container{
  padding: 5px 100px;
  .el-form-item__label{
    display: block; /* 将标签显示为块级元素，占据整行 */
    margin-bottom: 5px; /* 标签和输入框之间的间距 */
  }
  .el-form-item__content{
    .el-select{
      width:100%
    }
  }
}
</style>
